Shadow DOMの練習

Scrapbox上で作れるか試してみる

練習その1

題材

code:test1.js

customElements.define('progress-area', class extends HTMLElement {

connectedCallback() {

if (this.rendered) return;

this.render();

this.rendered = true;

}

render() {

code:test1.js

const shadow = this.shadowRoot ?? this.attachShadow({mode: 'open'});

shadow.innerHTML = `

<style>

div {

position: fixed;

top: 0; right: 0;

margin: 1rem; padding: 1rem;

z-index: 999999;

}

</style>

<div>

${this.getAttribute('message')}

</div>`;

}

get message() {

this.getAttribute('message');

}

set message(message) {

this.setAttribute('message', message);

}

static get observedAttributes() {

}

attributeChangedCallback(name, oldValue, newValue) {

}

});

window.progressArea = document.createElement('progress-area');

document.body.appendChild(progressArea);

14:46:34 できた

https://gyazo.com/c7fb1db3237a34794a7168bfbee89c1b